    * {
        margin: 0;
        padding: 0;
    }
    /* 设置初始值 */
    
    a {
        text-decoration: none;
    }
    
    img {
        border: none;
    }
    
    li {
        list-style: none;
    }
    
    body {
        width: 100%;
        font-size: 16px;
        margin: 0 auto;
        background-color: #f4f4f4;
    }
    /* 设置搜索框的位置为固定定位 */
    
    .totle {
        max-width: 540px;
        min-width: 320px;
        width: 540px;
        margin: 0 auto;
    }
    
    .search {
        position: fixed;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 540px;
        /* margin: 0 auto; */
        height: 50px;
        background-color: #fff;
        margin-bottom: 10px;
    }
    /* 设置圆角 边框线的属性 */
    
    .search .search0 {
        margin: 0 10px;
        height: 100%;
        height: 32px;
        border: #0086f6 solid 1.75px;
        border-radius: 25px;
        margin-top: 8px;
        position: relative;
        /* overflow: hidden; */
    }
    /* 设置搜索图标的大小以及对齐方式 */
    
    .search0 img {
        width: 20px;
        height: 20px;
        margin-top: 7px;
        margin-left: 5px;
        vertical-align: top;
    }
    
    .search0 span {
        display: inline-block;
        margin-top: 5px;
        color: #999;
    }
    /* 设置导航栏的宽高 */
    
    .nav {
        width: 100%;
        margin: 0 auto;
        height: 184px;
        margin-top: 53px;
        border-radius: 12px;
        /* margin-left: 20px;
    margin-right: 20px; */
        overflow: hidden;
        font-size: 12px;
    }
    
    .nav_con {
        box-sizing: border-box;
        height: 56px;
        margin: 2px 0px;
        /* background-color: blanchedalmond; */
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
    /* first */
    
    .nav_con_frist {
        width: 100%;
        height: 100%;
        flex: 1;
        border: #fff solid 1px;
    }
    
    .nav_con_frist a {
        color: #fff;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    
    .nav_con_frist:nth-child(1) a {
        background-image: linear-gradient( 180deg, #fa5956, #fb8650);
    }
    
    .nav_con_frist:nth-child(2) a {
        background-image: linear-gradient( 180deg, #3c83fa, #50b2fa);
    }
    
    .nav_con_frist:nth-child(3) a {
        background-image: linear-gradient( 0deg, #66a4ff, #5e80ff);
    }
    
    .nav_con_frist:nth-child(4) a {
        background-image: linear-gradient( 180deg, #2fc3b6, #52d9b3);
    }
    
    .nav_con_frist:nth-child(5) a {
        background-image: linear-gradient( 0deg, #ffa846, #ff8939 99%);
    }
    /* 设置nav下的背景图片 */
    
    .nav_con_frist>a [class^=nav_con_frist1] {
        /* flex: 1; */
        width: 28px;
        height: 28px;
        background-color: blue;
        background: url(../img/微信图片_20210818153830.png) no-repeat 0 0;
        background-size: 28px auto;
    }
    
    .nav_con_frist>a span:nth-child(1) {
        margin-top: 10px;
    }
    /*  */
    
    .nav_con_frist>a .nav_con_frist1_1 {
        background-position: 0 -84px;
    }
    
    .nav_con_frist>a .nav_con_frist1_2 {
        background-position: 0 -168px;
    }
    
    .nav_con_frist>a .nav_con_frist1_3 {
        background-position: 0 -364px;
    }
    
    .nav_con_frist>a .nav_con_frist1_4 {
        background-position: 0 -140px;
    }
    
    .nav_con_frist>a .nav_con_frist1_5 {
        background-position: 0 -28px;
    }
    /* 第二行 */
    
    .nav_con_second {
        width: 100%;
        height: 100%;
        flex: 1;
        border: #fff solid 1px;
    }
    
    .nav_con_second a {
        color: #333;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    
    .nav_con_second:nth-child(1) a {
        background-color: #fff5f1;
    }
    
    .nav_con_second:nth-child(2) a {
        background-color: #eff9ff;
    }
    
    .nav_con_second:nth-child(3) a {
        background-color: #f2f5ff;
    }
    
    .nav_con_second:nth-child(4) a {
        background-color: #ecfcf8;
    }
    
    .nav_con_second:nth-child(5) a {
        background-color: #fff9f2;
    }
    /* 设置nav下的背景图片 */
    
    .nav_con_second>a [class^=nav_con_second] {
        /* flex: 1; */
        width: 28px;
        height: 28px;
        background-color: blue;
        background: url(../img/微信图片_20210818153830.png) no-repeat 0 0;
        background-size: 28px auto;
    }
    
    .nav_con_second>a span:nth-child(1) {
        margin-top: 10px;
    }
    /*  */
    
    .nav_con_second>a .nav_con_second_1 {
        background-position: 0 -336px;
    }
    
    .nav_con_second>a .nav_con_second_2 {
        background-position: 0 -56px;
    }
    
    .nav_con_second>a .nav_con_second_3 {
        background-position: 0 -224px;
    }
    
    .nav_con_second>a .nav_con_second_4 {
        background-position: 0 -196px;
    }
    
    .nav_con_second>a .nav_con_second_5 {
        background-position: 0 -112px;
    }
    /* three */
    
    .nav_con_three {
        width: 100%;
        height: 100%;
        flex: 1;
        border: #fff solid 1px;
    }
    
    .nav_con_three a {
        color: #333;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    
    .nav_con_three:nth-child(1) a {
        background-color: #fff5f1;
    }
    
    .nav_con_three:nth-child(2) a {
        background-color: #eff9ff;
    }
    
    .nav_con_three:nth-child(3) a {
        background-color: #f2f5ff;
    }
    
    .nav_con_three:nth-child(4) a {
        background-color: #ecfcf8;
    }
    
    .nav_con_three:nth-child(5) a {
        background-color: #fff9f2;
    }
    /* 设置nav下的背景图片 */
    
    .nav_con_three>a [class^=nav_con_three] {
        /* flex: 1; */
        width: 28px;
        height: 28px;
        background-color: blue;
        background: url(../img/微信图片_20210818153830.png) no-repeat 0 0;
        background-size: 28px auto;
    }
    
    .nav_con_three>a span:nth-child(1) {
        margin-top: 10px;
    }
    /*  */
    
    .nav_con_three>a .nav_con_three_1 {
        background-position: 0 0;
    }
    
    .nav_con_three>a .nav_con_three_2 {
        background-position: 0 -280px;
    }
    
    .nav_con_three>a .nav_con_three_3 {
        background-position: 0 -252px;
    }
    
    .nav_con_three>a .nav_con_three_4 {
        background-position: 0 -392px;
    }
    
    .nav_con_three>a .nav_con_three_5 {
        background-position: 0 -308px;
    }
    /* 设置中间内容 */
    
    .nav_wrap {
        /* width: 100%; */
        height: 20px;
        /* background-color: red; */
        display: flex;
        flex-flow: row nowrap;
        /* 设置主轴上元素的排列方式 */
        justify-content: center;
        /* 设置测轴元素排列方式 */
        /* align-items: center; */
    }
    
    .nav_wrap_right {
        width: 14px;
        height: 4px;
        border-radius: 2px;
        background-color: #0086f6;
        margin-right: 5px;
    }
    
    .nav_wrap_left {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background-color: #ccc;
    }
    
    .content {
        height: 148px;
        /* background-color: #f4f4f4f4; */
        /* background-color: red; */
        display: flex;
        /* 设置主轴方向以及是否换行 */
        flex-flow: row nowrap;
        /* 设置元素在主轴方向上的排列方式 */
        justify-content: space-between;
    }
    
    .content_left {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 15px;
        margin-left: 8px;
        background-color: #fff;
    }
    
    .content_left a {
        height: 20px;
        display: flex;
        /* 设置主轴方向和是否换行 */
        flex-flow: row nowrap;
        /* 设置测轴元素排列方式（单行） */
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        margin-bottom: 6px
    }
    
    .content_left a>img {
        width: 73px;
        height: 20px;
    }
    
    .content_left a>div {
        background: #ffebe3;
        color: #ff4607;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        box-sizing: border-box;
        padding: 2px 4px;
    }
    
    .content_left1 {
        width: 100%;
        height: 84px;
        /* background-color: red; */
        border-radius: 8px;
        /* overflow: hidden; */
        position: relative;
    }
    
    .content_left1 img {
        height: 100%;
        width: 100%;
    }
    
    .content_left1_left {
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: 10px;
        background: rgba(51, 51, 51, .8);
        color: #fff;
        width: 54px;
        height: 14px;
        border-radius: 6px 0px 6px 0px;
    }
    /* .content_left1_right {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 34px;
    height: 5px;
}

.content_left1_right span {
    margin-right: 5px;
    display: inline-block;
    width: 12px;
    height: 4px;
}

.content_left1_right:nth-child(1) span {
    width: 15px;
    height: 4px;
    border-radius: 2px;
    background-color: #fff;
}

.content_left1_right:nth-child(2) span,
.content_left1_right:nth-child(2) span {
    height: 4px;
    width: 4px;
    border-radius: 2px;
    background-color: #ffffff66;
} */
    
    .content_left1_bottom {
        height: 18px;
        width: 100%;
        font-size: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }
    
    .content_left1_bottom div+i {
        flex: 1;
    }
    
    .content_left1_bottom div:nth-child(1) {
        color: #f60;
        order: -1;
    }
    
    .content_left1_bottom div:nth-child(2) {
        color: #fff;
        background-color: #f60;
        order: 1;
    }
    
    .content_left1_bottom i:nth-child(1) {
        color: #666;
    }
    
    .content_right {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding: 8px;
        margin-left: 8px;
        margin-right: 8px;
        border-radius: 15px;
        background-color: #fff;
    }
    
    .content_right a {
        height: 20px;
        display: flex;
        /* 设置主轴方向和是否换行 */
        flex-flow: row nowrap;
        /* 设置测轴元素排列方式（单行） */
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        margin-bottom: 6px
    }
    
    .content_right a>img {
        width: 73px;
        height: 20px;
    }
    
    .content_right a>div {
        background: #fdefd2;
        color: #ae6e15;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        box-sizing: border-box;
        padding: 2px 4px;
    }
    
    .content_right_cent {
        height: 84px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin: 1px 2px;
    }
    
    .content_right_cent_left img {
        height: 100%;
        width: 100%;
    }
    
    .content_right_cent_right img {
        height: 100%;
        width: 100%;
    }
    
    .content_right_cent_left {
        flex: 1;
        border-radius: 5px;
        overflow: hidden;
        background-color: greenyellow;
    }
    
    .content_right_cent_right {
        flex: 1;
        margin-left: 5px;
        border-radius: 5px;
        overflow: hidden;
        background-color: green;
    }
    
    .content_right_bottom {
        height: 20px;
        font-size: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        color: #000;
        /* background-color: hotpink; */
        overflow: hidden;
    }
    
    .content_right_bottom div:nth-child(1) {
        flex: 1;
    }
    
    .content_right_bottom div:nth-child(2) {
        flex: 1;
    }
    
    .content_bottom {
        width: 100%;
        margin: 0 auto;
        height: 88.5px;
        margin-top: 5px;
        border-radius: 5px;
        overflow: hidden;
    }
    
    .content_bottom img {
        width: 100%;
        height: 100%;
    }
    
    .foot {
        height: 162px;
    }
    
    .foot_top {
        width: 100%;
        margin: 0 auto;
        height: 32px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: flex-start;
    }
    
    .foot_top a {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        font-size: 13px;
        color: #000;
        border-radius: 4px;
        border: #333 solid 1px;
        flex: 1;
    }
    
    .foot_top a span {
        display: block;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 15px;
        width: 102px;
        height: 32px;
    }
    
    .foot_cent {
        margin: 0 auto;
        color: #666;
        font-size: 10px;
        margin-top: 15px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
    
    .foot_cent span {
        color: #666;
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .foot_middle {
        margin: 0 auto;
        color: #666;
        font-size: 10px;
        margin-top: 15px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }
    
    .foot_middle span {
        color: #666;
    }
    
    .bottom {
        position: fixed;
        bottom: 0px;
        width: 540px;
        left: 50%;
        transform: translate(-50%, 0);
        /* margin: 0 auto; */
        background-color: #fff;
        height: 55px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: cent;
        align-items: flex-end;
    }
    
    .bottom a {
        margin-left: 9%;
        margin-right: 9%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        color: #666;
    }
    
    .bottom a [class^=bottom] {
        /* display: inline-block; */
        width: 32px;
        height: 32px;
        background: url(../img/tabbar.png) no-repeat;
        background-size: 32px;
        /* background-color: lawngreen; */
    }
    
    .bottom a .bottom_1 {
        background-position: 0 -96px;
    }
    
    .bottom a .bottom_2 {
        background-position: 0 -32px;
    }
    
    .bottom a .bottom_3 {
        background-position: 0 -160px;
    }
    
    .bottom a .bottom_4 {
        background-position: 0 -224px;
    }